<template>
	<view class="search">
		
		<view class="topSearch" @click="handelclick">
			
			<uni-search-bar :radius="100" cancelButton="none" :disabled="true" placeholder="请输入选择部件名称">
			</uni-search-bar>
		</view>
		<view class="choiceList">
			<view class="choice_tit">已选择:</view>
			<view class="choice_cont" >
				<view class="conts" v-for="(item,index) in 
			initSelected" :key="item.id">{{item.name}}
				 <image class="close" src="/static/images/close.png" @click="removeclick(item,index)"></image> 
				 </view>
			</view>	
			<view class="btnsearch" @click="preserveClick">
				保存
			</view>
		</view>
		<zhilin-picker
			v-model="show"
			:title="title"
			:data="list"
			:isListAttr="true"
			:initSelected="initSelected"
			:showSearch="true"
			@searchChange="searchChange"
			@change="onChange"
			@confirm="onConfirm"
		/>
	</view>
</template>

<script>
import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue';
import zhilinPicker from '@/components/zhilin-picker/zhilin-picker.vue';
import { getPart } from '@/apis/repair.js';
import { getPlanPart } from '@/apis/maintains.js';
import http from '@/utils/request.js';
export default {
	name:'search',
	data() {
		return {
			show: false,
			title: '选择部件',
			// data:[],
			list:[],
			initSelected: this.$store.state.parts.getDetailArr,
			planPart:null,
			editId:null// 编辑id
		};
	},
	created() {
	},
	computed:{
			
	},
	components:{
		uniSearchBar,
		zhilinPicker
	},
		
	onLoad(opt) {
		this.planPart = JSON.parse(opt.obj);
		if (opt.checkId) {
			this.editId = opt.checkId == 'undefined' ? false : opt.checkId;
		}
		this.queryPartList(JSON.parse(opt.obj).id);
		 },
	onUnload() { },
	methods: {
		searchInput(val) {
		},
		searchChange(val) {
			// let id = this.planPart.id
			// this.queryPartList(id)
		},
		queryPartList(id) {
			getPlanPart({
				id:id,
				// name:name,
			}).then(res=>{
				if (res.code == 200) {
					this.list = [];
					this.list = res.data;
				} else {
					uni.showToast({
						title:'系统错误',
						icon:'none'
					});
				}
			}).catch(err=>{
				uni.showToast({
					title:'系统错误',
					icon:'none'
				});
			});
		},
		removeParts(id) {
			http.del(`/repairCheck/removePlanCheckHistory/${id}`).then(res=>{
					
			}).catch(err=>{
				uni.showToast({
					title:'系统错误',
					icon:'none'
				});
			});
		},
		removeclick(item,index) {
			if (item.groupId) {// 区分是否保存过
				uni.showModal({
					content: '确定要删除保存过的部件吗？',
					cancelText: '否',
					confirmText: '是',
					success:(res)=> {
						if (res.confirm) {
							this.initSelected.splice(index,1);
							this.$store.commit('getDetailData',this.initSelected);
							this.removeParts(item.id);
							let pages = getCurrentPages();// 获取页面栈
							let prevPage = pages[pages.length - 2];// 上一页
							prevPage.onShow(this.planPart);
						}
					}
				});
			} else {
				uni.showModal({
					content: '确定要删除该部件吗？',
					cancelText: '否',
					confirmText: '是',
					success:(res)=> {
						if (res.confirm) {
							this.initSelected.splice(index,1);
							this.$store.commit('getDetailData',this.initSelected);
						}
					}
				});
			}
		},
		// 出现下拉框
		handelclick() {
			this.show = true;
		},
		onChange(val) {
			// console.log(val,'onchange')
		},
			
		preserveClick() {
			let that = this;
			let resultArr = that.initSelected || [];
			if (resultArr.length > 0) {
				that.$store.commit('getDetailData',resultArr);
				uni.navigateBack({
					delta: 1
				});
				 }
		},
		// 确定按钮
		onConfirm(val = []) {
			let that = this;
			let selectedArr = that.initSelected || [];
			if (selectedArr.length > 0) {
				if (that.editId) {// 编辑时可能会有追加对应的部件
					selectedArr = selectedArr.concat(val);
					var obj = {};
					selectedArr = selectedArr.reduce(function(item, next) {
						obj[next.id] ? '' : obj[next.id] = true && item.push(next);
						return item;
					}, []);
						
						 that.initSelected = selectedArr;
				} else {
					that.initSelected = val;
					// that.$store.commit("getDetailData",that.initSelected)
				}
				 } else {
					  that.initSelected = val;
				 }
		},
	}
};
</script>

<style lang="scss">
	page{
		// D8D8D8
		background: #FFFFFF;
		z-index: 1;
	}
	.topSearch{
		z-index: 99;
		height: 100rpx;
	}
	.choiceList{
		
		padding: 20rpx;
		background-color: #FFFFFF;
		
		.choice_tit{
			width: 112rpx;
			height: 40rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
			line-height: 40rpx;
			
		}
		.btnsearch{
			width: 720rpx;
			margin: 0 auto;
			height: 70rpx;
			background: #0091ff;
			border-radius: 8rpx;
			line-height: 70rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
			margin-top: 40rpx;
		}
		.choice_cont{
			margin-top: 10rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: flex-start;
			align-content: flex-start;
			text-align: center;
			
			.conts{
				height: 50rpx;
				padding: 10rpx;
				padding-left: 20rpx;
				padding-right:20rpx;
				background: #edf7ff;
				border-radius: 8rpx;
				opacity: 1;
				font-size: 26rpx;
				font-weight: 400;
				text-align: center;
				color: #0091ff;
				line-height: 50rpx;
				margin: 10rpx;
				position: relative;
				.close{
					position: absolute;
					right: -1px;
					bottom: -1px;
					width: 40rpx;
					height: 40rpx;
				}
				
				// .close::before{
				// 	content: '';
				// 	display:block;
				// 	width: 20px;
				// 	height: 20px;
				// 	background-color: #e02020;
				// 	position: absolute;
				// 	right: -1px;
				// 	bottom: -1px;
				// 	z-index: 1;
				// 	clip-path: polygon(100% 0, 0% 100%, 100% 100%);
				// }
				// .close::after{
				// 	content: '\2716';
				// 	display:block;
				// 	width: 3px;
				// 	height: 6px;
				// 	// border-right: #fff solid 2px;
				// 	// border-bottom: #fff solid 2px;
				// 	// transform:rotate(-25deg);
				// 	position: absolute;
					
				// 	right: 12px;
				// 	bottom: 11px;
				// 	z-index: 2;
				// }
			}
		}
	}

</style>
